<template>
  <div class="collection">

    <div class="type">
      <div class="type-head">
        <el-image class="type-text" :src="require('@/assets/logo/logoH.png')"/>
      </div>
      <form class="find-button">
        <input class="find-input" type="text" placeholder="请输入您要搜索的内容..." v-model="searchText">
        <button class="find-click" type="submit" @click="searchButton()"><i class="el-icon-search"/></button>
      </form>
    </div>

    <div class="crumb-wrap">

      <div class="w">

        <div class="crumb">
          <div v-for="item in list.category" style="display: inline-block;float: left">
            <div class="crumb-item" @click="pushCategorySearch(item.catId, item.name)">
              <a>{{ item.name }}</a>
            </div>
            <div class="crumb-item sep">></div>
          </div>

          <div class="crumb-item">
            <div class="crumb-item-one" v-on:mouseenter="brandCard = true" v-on:mouseleave="brandCard = false">
              {{ list.brand[0].name }}
<!--              <img src="img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />-->
              <div class="crumb-item-two " v-if="brandCard"  v-on:mouseenter="brandCard = true" v-on:mouseleave="brandCard = false" >
                <div class="crumb-item-cons clear">
                  <ul>
                    <li v-for="item in list.brand" :key="item.brandId" @click="pushBrandSearch(item.brandId, item.name)">{{item.name}}</li>
                  </ul>
                </div>
              </div>

            </div>

          </div>
          <div class="crumb-item sep">></div>
          <div class="crumb-item">
            {{ list.info.skuSubtitle }}
          </div>
        </div>

      </div>
    </div>

    <div class="Shop">
      <div class="box">
        <div class="box-one ">
          <div class="boxx">

            <div class="imgbox">
              <div class="probox" v-on:mousemove="handleMove($event)" v-on:mouseenter="handleEnter()" v-on:mouseleave="handleLeave()">
                <div class="proboxDiv" :style="{top: mouseTop + 'px', left: mouseLeft + 'px'}"></div>
                <img class="img1" alt="" :src="imgUrl">
                <div class="hoverbox"></div>
              </div>
              <div class="zbig" :style="{display: mouseDisplay}">
                <img class="imgb" :src="imgUrl"
                     :style="{top: - mouseTop * 1.6666666666666666666666666666667 + 'px', left: - mouseLeft * 1.6666666666666666666666666666667 + 'px'}">
              </div>
              <div class="showbox">
                <img class="img1" alt="" src="img/59ded626N7c4cb0a3.jpg">
              </div>
            </div>

            <div class="box-lh">

              <div class="box-lh-one">
                <ul v-if="list.images">
                  <li class="imgButton" v-for="item in list.images.slice(imgListSlice)" :key="item.id" v-on:mouseenter="imgUrlChange(item.imgUrl)"><img :src="item.imgUrl" /></li>
                </ul>
              </div>
              <div id="left" @click="photoLeft()">
                < </div>
              <div id="right" @click="photoRight()">
                >
              </div>

            </div>

          </div>
          <div class="box-two">
            <div class="box-name">
              {{list.info.skuTitle}}
            </div>
            <div class="box-hide">{{list.info.skuSubtitle}}
            </div>

            <div class="product-seckill" :style="{backgroundImage:`url(${box_price})`}" v-show="seckillBox">
              <i class="el-icon-alarm-clock" style="font-size: 20px;font-weight: 400;margin-right: 10px;"></i>
              <div style="display: inline-block;font-size: 16px;font-weight: 400;">秒杀</div>
              <div class="seckill-left-text2">
                距离结束
                <div class="seckill-left-text2-one">{{ countdownHour }}</div>
                :
                <div class="seckill-left-text2-one">{{ countdownMinute }}</div>
                :
                <div class="seckill-left-text2-one">{{ countdownSecond }}</div>
              </div>
            </div>

            <div class="box-summary clear">
              <ul>
                <li>京东价</li>
                <li>
                  <span>￥</span>
                  <span>{{ list.info.price }}.00</span>
                </li>
                <li>

                </li>
                <li>
                  <a>

                  </a>
                </li>
              </ul>
            </div>
<!--            <div class="box-wrap clear">-->
<!--              <div class="box-wrap-one clear">-->
<!--                <ul>-->
<!--                  <li>增值业务</li>-->
<!--                  <li><img src="img/90a6fa41d0d46b4fb0ff6907ca17c478.png" /></li>-->
<!--                  <li><img src="img/2e19336b961586468ef36dc9f7199d4f.png" /></li>-->
<!--                  <li><img src="img/1f80c3d6fabfd3418e54b005312c00b5.png" /></li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->

            <div class="box-stock">
              <ul class="box-ul">
                <li>配送至</li>
                <li class="box-stock-li">
                  <div class="box-stock-one">
                    北京朝阳区管庄
                    <img src="img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
                    <span style="color: red; font-weight: bold;" v-show="!list.haveStock">无货</span>
                  </div>
                  <div class="box-stock-two">
                    <dl>
                      <dt>
                        <a>选择新地址</a>
                        <img src="img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="box-stock-two-img"/>
                      </dt>
                      <dd>
                        <div class="box-stock-dd">
                          <div class="box-stock-top">
                            <div class="box-stock-div">北京</div>
                            <div class="box-stock-div">朝阳区</div>
                            <div class="box-stock-div">管庄</div>
                          </div>
                          <div class="box-stock-fot">
                            <div class="box-stock-con" style="display: block;">
                              <ul>
                                <li>北京</li>
                                <li>上海</li>
                                <li>天津</li>
                                <li>重庆</li>
                              </ul>
                            </div>
                            <div class="box-stock-con">
                              <ul>
                                <li>朝阳区</li>
                                <li>海淀区</li>
                                <li>东城区</li>
                                <li>西城区</li>
                              </ul>
                            </div>
                            <div class="box-stock-con">
                              <ul>
                                <li>4环到5环之内</li>
                                <li>管庄</li>
                                <li>北苑</li>
                              </ul>
                            </div>

                          </div>
                        </div>
                      </dd>
                    </dl>

                  </div>

                </li>
<!--                <li>-->
<!--                  <span>无货</span>， 此商品暂时售完-->
<!--                </li>-->
              </ul>
            </div>

            <div style="margin-left: 10px;color: #999;font-family: simsun;">
              <div style="display: inline-block;width: 56px;height: 34px;line-height: 34px;">
                <span>重</span>
                <span style="float: right">量</span>
              </div>
              <div style="display: inline-block;margin-left: 17px">
                <span>{{ list.weight }}kg</span>
              </div>
            </div>

            <div class="box-attr-3">
              <div style="margin-top: 10px"></div>
              <div class="box-attr-2 clear" v-for="item in list.saleAttr" :key="item.attrId">
                <dl>
                  <dt style="margin-right: 10px;">选择{{ item.attrName }}</dt>
                  <dd
                    v-for="t in item.skuSaleAttrDTOs"
                    :key="t.skuId"
                    @click="attrValueButton(item.attrId, t.skuId)"
                    :style="t.skuId.indexOf(skuId) !== -1 ? 'color: rgb(60,133,39);border: rgb(60,133,39) 1px solid;click: false' : ''">
                    {{ t.attrValue }}
                  </dd>
                </dl>
              </div>

            </div>

            <div class="box-btns clear">
              <div class="box-btns-one">
                <input type="text" name="" id="" v-model="productCount" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>200)value=200;if(value<0)value=null"/>
                <div class="box-btns-one1">

                  <div>
                    <button id="jia" @click="productCount < 200 ? productCount += 1 : productCount">
                      +
                    </button>
                  </div>
                  <div>
                    <button id="jian" @click="productCount > 1 ? productCount -= 1 : productCount">
                      -
                    </button>
                  </div>

                </div>
              </div>
              <div :class="list.haveStock ? 'box-btns-two' : 'box-btns-two-not-allowed'">
                <a @click="pushCartItem()" style="color: white">
                  加入购物车
                </a>
              </div>
              <div class="box-btns-three">
                <img src="img/e4ed3606843f664591ff1f68f7fda12d.png" alt="" />
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="ShopXiangqing">
        <!--商品介绍-->
        <div class="allquanbushop" style="margin-bottom: 20px">
          <ul class="shopjieshao">
            <li class="jieshoa productDetail" @click="productDetail = 'Describe'" :style="productDetail === 'Describe' ? 'background: rgb(60,133,39);color: white;' : ''">
              商品介绍
            </li>
            <li class="baozhuang productDetail"  @click="productDetail = 'BaseAttr'" :style="productDetail === 'BaseAttr' ? 'background: rgb(60,133,39);color: white;' : ''">
              规格与包装
            </li >
            <li class="pingjia productDetail"  @click="productDetail = 'Comment'" :style="productDetail === 'Comment' ? 'background: rgb(60,133,39);color: white;' : ''">
              商品评价(4万+)
            </li>
          </ul>
<!--          <button class="Lijiyuyuessss">-->
<!--            加入购物车-->
<!--          </button>-->

          <!--商品详情-->
          <div class="huawei">
            <ul class="xuanxiangka">
              <li class="jieshoa actives" :style="{display: productDetail === 'Describe' ? '' : 'none'}" id="li1">
                <div class="shanpinsssss">
                  <el-image
                    style="width: 800px;margin-left: 250px"
                    v-for="item in list.desc.decript.split(',')"
                    :key="item"
                    :src="item"
                    fit="fill"></el-image>
                </div>
              </li>
              <li class="baozhuang actives" :style="{display: productDetail === 'BaseAttr' ? '' : 'none'}" id="li2">
                <div class="guiGebox">
                  <div class="guiGe" v-for="item in list.groupVo">
                    <h3>{{ item.groupName }}</h3>
                    <dl v-for="t in item.attrValues">
                      <dt>{{ t.attrName }}</dt>
                      <dd>{{ t.attrValue }}</dd>
                    </dl>
                  </div>
                </div>
              </li>
              <!--评价-->
              <li class="PINgjia actives" :style="{display: productDetail === 'Comment' ? '' : 'none'}" id="li4">
                <div class="h3">
                  <h3>商品评价</h3>
                </div>
                <div class="nav">
                  <div class="left">
                    <p class="haoping">好评度</p>
                    <p><span>100%</span></p>
                  </div>
                  <div class="right">
                    <ul>
                      <li>
                        <a href="##">就是快（424）</a>
                      </li>
                      <li>
                        <a href="##">物流很快（254） </a>
                      </li>
                      <li>
                        <a href="##">货真价实（168）</a>
                      </li>
                      <li>
                        <a href="##">有档次（158）</a>
                      </li>
                      <li>
                        <a href="##">国产品牌（133）</a>
                      </li>
                      <li>
                        <a href="##">外形美观（103）</a>
                      </li>
                      <li>
                        <a href="##">很给力（75）</a>
                      </li>
                      <li>
                        <a href="##">反应灵敏（68）</a>
                      </li>
                      <li>
                        <a href="##">性价比高（60）</a>
                      </li>
                      <li>
                        <a href="##">价格优惠（50）</a>
                      </li>
                      <li>
                        <a href="##">功能齐全（49）</a>
                      </li>
                      <li style="">
                        <a href="##">速度太慢（5）</a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!--全部评价-->
                <div class="allpingjia">
                  <ul>
                    <li><a href="##">全部评价（4.2万）</a></li>
                    <li><a href="##">晒图（500）</a></li>
                    <li><a href="##">追拼（200+）</a></li>
                    <li><a href="##">好评（4.1万）</a></li>
                    <li><a href="##">中评（100+）</a></li>
                    <li><a href="##">差评（100+）</a></li>
                    <li><a href="##"><input type="checkbox"/>只看当前商品价格</a></li>
                    <li class="imga" style="float: right;"><a href="##">推荐排序 <img src="img/animaite.png"/> </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="headera">
    </div>
    <div class="Fixedbian">
    </div>
    <div class="gouwuchexiaguo">
    </div>


  </div>
</template>

<script>

export default {
  name: 'ProductDetail',
  data() {
    return {
      imgUrl: '',
      imgListSlice: 0,
      imgLength: 0,
      productCount: 1,
      img: [
        {
          id:1,
          url: require('@/assets/shopModel/b1.jpg')
        },
        {
          id:2,
          url: require('@/assets/shopModel/b2.jpg')
        },
        {
          id:3,
          url: require('@/assets/shopModel/b3.jpg')
        },
        {
          id:4,
          url: require('@/assets/shopModel/b4.jpg')
        },
        {
          id:5,
          url: require('@/assets/shopModel/b5.jpg')
        },
        {
          id:6,
          url: require('@/assets/shopModel/b6.jpg')
        }
      ],
      skuId: '',
      searchText: '',
      mouseDisplay: 'none',
      mouseTop: '0px',
      mouseLeft: '0px',
      productDetail: 'Describe',
      attrValueId: {},
      list: {
        desc: {
          decript: ''
        },
        info: {
          skuTitle: '',
          skuSubtitle: '',
          skuDefaultImg: '',
          price: 0
        },
        brand:[{name: ''}],
        category:[]
      },
      brandCard: false,
      box_price: require('@/assets/product/product_seckill.jpg'),
      // now是实时的时间，也就是流动的时间
      now: NaN,
      // time是设定的倒计时，如3分钟，换算成和timestamp一样的单位，就是3 * 60000 = 180000
      // 需要自己定义倒计时时间
      time:0,
      seckillSku:[{
        startTime: null,
        skuInfoTO: {
          skuName: null
        }
      }],
      seckillBox: false
    }
  },
  created() {
    this.getProductDetail()
  },
  methods: {
    imgUrlChange(url){
      this.imgUrl = url
    },
    photoLeft(){
      if(this.imgListSlice > 0){
        this.imgListSlice -= 5
      }
    },
    photoRight(){
      if(this.imgLength > 0 && (this.imgListSlice / 5) < this.imgLength){
        this.imgListSlice += 5
      }
    },
    handleEnter(){
      this.mouseDisplay = 'block'
    },
    handleLeave(){
      this.mouseDisplay = 'none'
    },
    handleMove(e){
      const X = e.pageX - 350 - 300
      const Y = e.pageY - 195 - 300
      this.mouseTop = Y >= 0 ? 150 : -Y >= 150 ? 0 : Y + 150
      this.mouseLeft = X >= 0 ? 150 : -X >= 150 ? 0 : X + 150
    },
    attrValueButton(attrId, skuId){
      const id = this.$route.query.skuId
      if(skuId.indexOf(id) === -1){
        if(skuId.indexOf(',') === -1){
          this.$router.push({
            path: "/product-detail",
            query: {
              skuId: skuId
            }
          });
          this.getProductDetail()
        }
        this.list.saleAttr.forEach((item)=>{
          if(item.attrId !== attrId){
            item.skuSaleAttrDTOs.forEach((i)=>{
              if(i.skuId.indexOf(id) !== -1){
                skuId.split(",", ).forEach((t)=>{
                  if(i.skuId.indexOf(t) !== -1){
                    this.$router.push({
                      path: "/product-detail",
                      query: {
                        skuId: t
                      }
                    });
                    this.getProductDetail()
                  }
                })
              }
            })
          }
        })
      }
    },
    pushCartItem(){
      this.$store.dispatch('cart/cart/setCartItem', {skuId: this.skuId, count: this.productCount})
        .then((data)=>{

          let routeData = this.$router.resolve({
            path: "/cart-success",
            query: {
              data: JSON.stringify(data.data),
              count: this.productCount
            }
          });

          //必要操作，否则不会打开新页面
          window.open(routeData.href, '_blank');
        })
        .catch(()=>{})
    },
    getProductDetail(){
      if(this.$route.query.skuId !== undefined){
        this.$store.dispatch('goods/reception/getSkuInfo', this.$route.query.skuId)
          .then((data)=>{
            this.skuId = data.data.info.skuId
            this.list = data.data
            this.imgLength = Math.trunc(this.list.images.length / 5)
            this.imgUrl = this.list.info.skuDefaultImg
            this.list.category.reverse()
            console.log(this.list)

            this.$store.dispatch('seckill/seckill/getSkuSeckillInfo', data.data.info.skuId)
              .then((data)=>{
                if(data.data.length > 0){
                  this.seckillSku = data.data
                  if(this.seckillSku.length > 0){
                    this.time = this.seckillSku[0].endTime - new Date().getTime()
                    this.list.info.price -= new Number(data.data[0].seckillPrice)
                    const update = () => {
                      // 也是循环调用自身,这次会在一开始就更新this.now
                      this.now = Date.now();
                      // requestAnimationFrame接受一个参数，这个参数是一个函数
                      // 因为在update里调用requestAnimationFrame(update)，相当于设定下次屏幕刷新前执行一下update
                      // 那么下次执行update的时候，又会设置下一帧要调用update
                      //更新的事件由API把握
                      //requestAnimationFrame在下次屏幕刷新前,所以不同的显示器，刷新率不一样，调用的次数也不同,但是，能保证，每次重绘的时候总是最新的时间
                      requestAnimationFrame(update);
                    };
                    update();
                    this.seckillBox = true
                  }
                }else {
                  this.seckillBox = false
                }
              })
              .catch(()=>{
                this.seckillBox = false
              })
          })
      }else{
        this.$router.push({path: "/search"});
      }
    },
    searchButton(){
      if(this.searchText !== ''){
        let routeData = this.$router.resolve({
          path: "/search",
          query: {
            keyword: this.searchText
          }
        });

        //必要操作，否则不会打开新页面
        window.open(routeData.href, '_blank');
      }
    },
    pushCategorySearch(id, name){
      if(id !== null){
        this.$router.push({
          path: "/search",
          query: {
            catId: id,
            name: name
          }
        })
      }
    },
    pushBrandSearch(id, name){
      this.$router.push({
        path: "/search",
        query: {
          brandId: id,
          name: name
        }
      })
    }
  },
  computed: {
    // 结束时间
    finishTime() {
      //这里并没有用this.now,因为this.now记录的是实时时间
      //这里的是设定的时间+设定的倒计时毫秒数
      return Date.now() + this.time;
      //this.time的变化，触发这个结束的时间，只要this.time不更新，结束时间就不会重新计算，所以结束时间一直固定
    },
    //剩余的毫秒数
    countdown() {
      //倒计时不会小于0，也就是说countdown最小值是0
      return Math.max(0, this.finishTime - this.now);
    },
    // 时
    countdownHour() {
      //padStart是用于补位
      return String.prototype.padStart.call(
        (this.countdown / 3.6e6) | 0,
        2,
        "0"
      );
    },
    // 分
    countdownMinute() {
      return String.prototype.padStart.call(
        ((this.countdown % 3.6e6) / 6e4) | 0,
        2,
        "0"
      );
    },
    // 秒
    countdownSecond() {
      return String.prototype.padStart.call(
        ((this.countdown % 6e4) / 1e3) | 0,
        2,
        "0"
      );
    }
  },
  // 监听时间到了：
  watch: {
    countdown(countdown) {
      if (0 === countdown) {
        this.$message({
          message: '当前秒杀场次已过请刷新页面',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.imgButton{
  border: white 2px solid;

  &:hover{
    cursor: pointer;
    border: rgb(60,133,39) 2px solid;
  }
}

.seckill-left-text2{
  float: right;

  .seckill-left-text2-one{
    width: 20px;
    height: 21px;
    background-color: rgb(47,52,48);
    display: inline-block;
    padding-top: 4px;
    text-align: center;
  }
}

.zbig{
  width:500px;
  height:500px;
  position:absolute;
  z-index: 3;
  top: 0;
  left:447px;
  margin-left:4px;
  overflow:hidden;
  border:1px solid rgb(220,220,220);
  background-color: red;

  .imgb{
    width:750px;
    height:750px;
    position:relative;
  }
}

.productDetail{
  &:hover{
    cursor: pointer;
    color: rgb(60,133,39);
  }
}

.product-seckill{
  color: white;
  padding: 10px;
  background-size:cover;
}

.collection {
  height: 100%;
  width: 100%;
  background-color: rgb(245, 245, 245);

  .type {
    width: 1300px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    //padding-top: 20px;
    //padding-bottom: 20px;

    .type-head {
      width: 130px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      float: left;

      .type-text {
        height: 50px;
        width: 130px;
        margin-top: 15px;
        //display: inline-block;
        //font-size: 16px;
        //margin-top: 13px;
        //margin-right: 20px;
        //float: left;

        &:hover {
          cursor: pointer;
          //color: rgb(79,159,52);
        }
      }
    }

    .find-button {
      background-color: white;
      position: relative;
      width: 400px;
      float: right;
      border: 1px solid rgb(178,178,178);
      margin-top: 19px;

      .find-input {
        background: transparent;
        width: 100%;
        height: 42px;
        padding-left: 13px;
        padding-right:46px;
        border: none;
        outline: none;
        font-size: 10px;
      }

      .find-click {
        background: transparent;
        top: 0;
        right: 0;
        height: 42px;
        width: 42px;
        cursor: pointer;
        position: absolute;
        border: none;
        outline: none;
      }
    }
  }
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none; }

a {
  text-decoration: none;
  color: #666; }

.Shop {
  width: 1300px;
  margin: 10px auto; }
.Shop .qianggoulioucheng {
  width: 100%;
  height: 62px;
  background: #f7f7f7;
  border: 1px solid #eeeeee; }
.Shop .qianggoulioucheng .lioucheng {
  float: left;
  width: 156px;
  height: 60px;
  border-right: 1px solid #eeeeee; }
.Shop .qianggoulioucheng .lioucheng h3 {
  width: 156px;
  height: 60px;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: #e4393c; }
.Shop .qianggoulioucheng .qianggoubuzhao {
  float: left; }
.Shop .qianggoulioucheng .qianggoubuzhao li {
  width: 260px;
  height: 60px;
  float: left; }
.Shop .qianggoulioucheng .qianggoubuzhao li img {
  width: 45px;
  float: left;
  padding-top: 2px; }
.Shop .qianggoulioucheng .qianggoubuzhao li .buzhou {
  padding-left: 4px;
  padding-top: 12px;
  float: left; }
.Shop .qianggoulioucheng .qianggoubuzhao li .buzhou dt {
  font-size: 14px;
  color: #936666;
  font-weight: 600; }
.Shop .qianggoulioucheng .qianggoubuzhao li .buzhou dl {
  font-size: 12px;
  color: #999999; }
.Shop .ShopXiangqing {
  margin-top: 10px;
  width: 1300px; }
.Shop .ShopXiangqing .allLeft {
  float: left;
  width: 212px; }
.Shop .ShopXiangqing .allLeft .huoreyuyue {
  width: 212px;
  border: 1px solid #eeeeee;
  background: #f7f7f7;
  line-height: 43px; }
.Shop .ShopXiangqing .allLeft .huoreyuyue h3 {
  margin-left: 20px;
  color: #666666; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing {
  width: 210px;
  border: 1px solid #eeeeee; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange {
  width: 100%; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange li {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 999; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange li img {
  margin-top: 20px;
  border: none; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange li p {
  font-size: 12px;
  text-align: left;
  margin: 5px 10px; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange li p a {
  color: #666666; }
.Shop .ShopXiangqing .allLeft .dangeshopxingqing .shopdange li p strong {
  color: red;
  font-size: 14px; }
.Shop .ShopXiangqing .allquanbushop {
  float: right;
  width: 1300px;
  position: relative; }
.Shop .ShopXiangqing .allquanbushop .shopjieshao {
  background: #f7f7f7;
  height: 40px;
  width: 1300px;
  border: 1px solid #eeeeee;
  border-bottom: 1px solid rgb(60,133,39); }
.Shop .ShopXiangqing .allquanbushop .shopjieshao li {
  height: 38px;
  text-align: center;
  font-size: 14px;
  float: left;
  padding: 10px 25px;
  background: #f7f7f7; }
.Shop .ShopXiangqing .allquanbushop .shopjieshao li a {
  color: #666666;
  font-size: 600; }
.Shop .ShopXiangqing .Lijiyuyuessss {
  padding: 0 18px;
  position: absolute;
  border: none;
  background: none;
  top: 7px;
  right: 10px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background: rgb(60,133,39);
  margin-right: 10px;
  font-size: 10px;
  color: white; }
.Shop .ShopXiangqing .Lijiyuyuessss .huawei {
  width: 990px;
  clear: both; }
.Shop .ShopXiangqing .Lijiyuyuessss .huawei .xuanxiangka {
  width: 990px; }
.Shop .ShopXiangqing .Lijiyuyuessss .huawei .xuanxiangka li {
  display: none; }
.Shop .ShopXiangqing .Lijiyuyuessss .huawei .xuanxiangka .jieshoa {
  width: 100%;
  display: block;
}

.PINgjia {
  width: 100%;
  margin-top: 10px; }
.PINgjia .h3 {
  color: #666666;
  background-color: #f7f7f7;
  border: 1px solid #eee; }
.PINgjia .h3 h3 {
  font-size: 14px;
  padding: 10px 0;
  text-indent: 10px; }
.PINgjia .nav {
  width: 100%;
  overflow: hidden; }
.PINgjia .nav .left {
  margin: 11px 0px;
  float: left; }
.PINgjia .nav .left .haoping {
  font-size: 12px;
  color: #666666; }
.PINgjia .nav .left p span {
  font-size: 38px;
  color: red; }
.PINgjia .nav .right {
  margin: 27px -8px;
  float: right; }
.PINgjia .nav .right ul {
  width: 900px;
  height: 64px; }
.PINgjia .nav .right ul li {
  float: left;
  border: 1px solid #e0e0e0;
  margin: 3px 5px;
  padding: 0 8px;
  height: 20px;
  line-height: 20px; }
.PINgjia .nav .right ul li a {
  color: #999999;
  font-size: 12px; }
.PINgjia .nav .right ul li:hover {
  border: 1px solid gray; }
.PINgjia .nav .right ul li:hover a:hover {
  color: gray; }
.PINgjia .nav .right ul li:active {
  border: 1px solid red; }
.PINgjia .nav .right ul li:active a:active {
  color: red; }
.PINgjia .allpingjia {
  width: 1300px;
  height: 30px; }
.PINgjia .allpingjia ul {
  width: 978px;
  height: 30px;
  border: 1px solid #eeeeee;
  background: #f7f7f7; }
.PINgjia .allpingjia ul li {
  float: left;
  padding: 0 10px;
  height: 30px;
  line-height: 30px; }
.PINgjia .allpingjia ul li a {
  font-size: 12px;
  color: #666666; }
.PINgjia .allpingjia ul li a img {
  float: right;
  margin: 10px 0; }
.PINgjia .allpingjia ul .imga:hover img {
  animation: all 1s;
  transform: rotateX(180deg); }

.shanpinsssss {
  width: 100%;
  margin-top: 20px; }
.shanpinsssss p a {
  font-size: 12px;
  color: #666666;
  margin-left: 40px; }
.shanpinsssss table {
  margin-top: 20px;
  margin-left: 40px; }
.shanpinsssss table td {
  width: 25%; }
.shanpinsssss table td a {
  font-size: 12px;
  color: #666666;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis; }
.shanpinsssss table td a:hover {
  color: red; }
.shanpinsssss .xiaoguo {
  margin-top: 20px;
  margin-left: 106px; }

.headera {
  width: 100%;
  overflow: hidden; }
.headera .Logo-tu {
  width: 100%;
  background: #F5F5F5;
  height: 94px;
  text-align: center; }
.headera .Logo-tu span {
  width: 220px;
  height: 54px;
  display: inline-block;
  margin: 24px 50px; }
.headera .Logo-tu span img {
  height: 54px; }
.headera .table {
  overflow: hidden;
  width: 1210px;
  margin: 0 auto;
  border-bottom: 1px solid gainsboro; }
.headera .table dl {
  margin-right: 208px;
  float: left;
  margin-bottom: 20px; }
.headera .table dl dt {
  margin-top: 20px;
  font-size: 14px; }
.headera .table dl dt a {
  color: #666666; }
.headera .table dl dt a:hover {
  color: red; }
.headera .table dl dd {
  margin-top: 7px;
  font-size: 12px; }
.headera .table dl dd a {
  color: #666666; }
.headera .table dl dd a:hover {
  color: red; }
.headera .table .dls {
  float: right;
  margin-right: 0; }
.headera .guanyuwomen {
  width: 100%;
  overflow: hidden;
  text-align: center; }
.headera .guanyuwomen ul {
  padding: 20px;
  margin-left: 129px; }
.headera .guanyuwomen ul li {
  padding: 0 5px;
  float: left;
  font-size: 12px;
  color: gainsboro; }
.headera .guanyuwomen ul li a {
  font-size: 12px;
  color: #666666; }
.headera .guanyuwomen ul li a:hover {
  color: red; }
.headera .p1 {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
  color: gainsboro; }
.headera .p1 img {
  height: 12px;
  vertical-align: 0; }
.headera .p1 a {
  padding: 0 2px;
  font-size: 12px;
  color: #666666; }
.headera .p1 a:hover {
  color: red; }
.headera .p3 {
  margin-top: 5px;
  text-align: center; }
.headera .p3 img {
  padding: 0 5px; }

.shopjieshaos {
  background: #f7f7f7;
  height: 40px;
  width: 990px;
  border: 1px solid #eeeeee;
  border-bottom: 1px solid red; }
.shopjieshaos li {
  height: 38px;
  text-align: center;
  font-size: 14px;
  float: left;
  padding: 10px 25px;
  background: #f7f7f7; }
.shopjieshaos li a {
  color: #666666;
  font-size: 600; }

.posi {
  z-index: 100;
  position: fixed;
  top: 0;
  border-bottom: 1px solid white; }

.Fixedbian {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 34px; }
.Fixedbian ul {
  width: 34px; }
.Fixedbian ul li {
  width: 45px;
  height: 35px;
  text-align: center;
  background: #7a6e6e;
  line-height: 34px; }
.Fixedbian ul li a {
  text-decoration: none;
  color: white; }

.guiGebox1 {
  margin-left: 106px; }

.guiGebox {
  width: 1300px;
  margin: 0 auto; }
.guiGebox .guiGe {
  width: 1300px;
  padding: 12px 0;
  color: #999;
  font-size: 12px;
  border-bottom: 1px solid #eee; }
.guiGebox .guiGe h3 {
  width: 110px;
  height: 26.4px;
  float: left;
  line-height: 26.4px;
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  color: #999; }
.guiGebox .guiGe dl {
  width: 880px;
  margin-left: 110px; }
.guiGebox .guiGe dl dt {
  width: 165px;
  height: 26.4px;
  line-height: 26.4px;
  padding-right: 5px;
  float: left;
  text-align: right; }
.guiGebox .guiGe dl dd {
  width: 670px;
  line-height: 26.4px;
  height: 26.4px;
  margin-left: 210px; }
.guiGebox .guiGe dl .Ptable-tips {
  position: relative;
  float: left;
  width: auto;
  margin-left: 0; }
.guiGebox .guiGe dl .Ptable-tips a {
  color: #666; }
.guiGebox .guiGe dl .Ptable-tips a i {
  display: inline-block;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #B3B5BE;
  vertical-align: -3px;
  color: white;
  line-height: 16px; }
.guiGebox .package-list {
  width: 990px;
  padding: 12px 0;
  color: #999;
  font-size: 12px;
  margin-top: -1px; }
.guiGebox .package-list h3 {
  width: 130px;
  height: 26.4px;
  line-height: 26.4px;
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  float: left; }
.guiGebox .package-list p {
  width: 835px;
  height: 52.8px;
  line-height: 27.8px;
  margin-left: 155px;
  padding-right: 50px; }

.clear {
  overflow: hidden; }

.crumb-wrap {
  height: 44px;
  background: #F2F2F2; }
.crumb-wrap .w {
  width: 1300px;
  height: 44px;
  position: relative;
  margin: 10px auto;
}
.crumb-wrap .crumb {
  position: relative;
  z-index: 5;
  padding: 13px 0 9px;
  line-height: 20px;
  float: left; }
.crumb-wrap .crumb .crumb-item {
  float: left;
  padding: 0 6px;
  font-size: 12px; }
.crumb-wrap .crumb .crumb-item a {
  color: #737373; }
.crumb-wrap .crumb .crumb-item:hover .crumb-item-one .img {
  transform: rotateZ(180deg);
  transition: all .2s; }
.crumb-wrap .crumb .crumb-item:hover a {
  color: #FF0000; }
.crumb-wrap .crumb .crumb-item .crumb-item-one {
  cursor: pointer;
  position: relative;
  z-index: 10; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two {
  position: absolute;
  left: -1px;
  border: solid 1px #000;
  border-top: 0;
  margin-top: -1px;
  width: 300px;
  background: #FFFFFF; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul {
  float: left;
  width: 300px;
  margin-left: 10px;
  margin-top: 20px; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li {
  float: left; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li:first-child {
  width: 65px; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li:last-child {
  width: 132px; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li:last-child p {
  text-align: left; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li:last-child p:first-child:hover {
  color: rgb(60,133,39); }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .con-ul li:last-child p:last-child {
  color: red;
  font-weight: 800;
  font-size: 16px; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .crumb-item-cons {
  border-top: solid 1px #000;
  padding: 10px 0;
  width: 300px;
}
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .crumb-item-cons ul {
  padding: 0 10px;
  overflow: hidden; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .crumb-item-cons ul li {
  float: left;
  text-align: left;
  //width: 80px;
  margin: 5px 30px 5px 0; }
.crumb-wrap .crumb .crumb-item .crumb-item-one .crumb-item-two .crumb-item-cons ul li:hover {
  color: rgb(60,133,39); }
.crumb-wrap .crumb .sep {
  font-family: simsun; }
.crumb-wrap .crumb .crumb-item-one {
  border: solid 1px #000;
  width: 132px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background: #fff; }
.crumb-wrap .contact {
  padding: 13px 0 0;
  z-index: 4;
  float: right; }
.crumb-wrap .contact:hover .contact-one {
  display: block; }
.crumb-wrap .contact .contact-ul li {
  float: left;
  font-size: 12px;
  margin-left: 10px; }
.crumb-wrap .contact .contact-ul li:hover a {
  color: #FF0000; }
.crumb-wrap .contact .contact-ul li a {
  color: #737373; }
.crumb-wrap .contact .contact-ul li img {
  width: 17px;
  height: 17px;
  vertical-align: -3px; }
.crumb-wrap .contact .contact-ul li span {
  display: inline-block; }
.crumb-wrap .contact .contact-ul li .contact-sp {
  border: solid 1px red;
  margin-left: 5px; }
.crumb-wrap .contact .contact-ul li .contact-sp .contact-sp1 {
  color: #FF0000;
  padding-left: 2px; }
.crumb-wrap .contact .contact-ul li .contact-sp .contact-sp2 {
  background: #FF0000;
  color: #fff; }
.crumb-wrap .contact .contact-one {
  position: absolute;
  display: none;
  cursor: pointer;
  right: 0;
  border: solid 1px #737373;
  width: 230px;
  margin-top: 29px;
  background: #FFFFFF;
  z-index: 999; }
.crumb-wrap .contact .contact-one img {
  vertical-align: -5px; }
.crumb-wrap .contact .contact-one ul {
  padding: 20px 20px 0; }
.crumb-wrap .contact .contact-one li:not(:last-child) {
  margin: 5px 0; }
.crumb-wrap .contact .contact-one li:nth-child(4) {
  border-top: solid 1px #737373;
  text-align: center;
  padding: 10px 0; }
.crumb-wrap .contact .contact-one .contact-img {
  width: 100px;
  height: 100px; }
.crumb-wrap .contact .contact-one .contact-two {
  background: #F2F2F2;
  height: 30px;
  line-height: 30px; }
.crumb-wrap .contact .contact-one .contact-two span {
  display: inline-block;
  text-align: center;
  width: 48%; }

.box {
  margin-top: 10px;
  overflow: hidden;
  z-index: -999;
  font-size: 14px;
  height: 583px;
  width: 1300px;
}
.box .box-one {
  position: relative;
  width: 1300px;
  margin: 0 auto; }
.box .box-two {
  position: absolute;
  right: 0;
  width: 832px;
  float: right; }
.box .box-two .box-name {
  font: 700 18px Arial, "microsoft yahei";
  color: #666;
  padding-top: 10px;
  line-height: 28px;
  margin-bottom: 5px; }
.box .box-two .box-hide {
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-height: 1.5em;
  line-height: 1.5em;
  font-size: 12px;
  color: rgb(60,133,39); }
.box .box-two .box-hide a {
  color: #636DAF; }
.box .box-two .box-yuyue {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  background: #E4393C;
  font-family: "Microsoft YaHei";
  overflow: hidden;
  zoom: 1; }
.box .box-two .box-yuyue img {
  vertical-align: -5px; }
.box .box-two .box-yuyue .yuyue-one {
  float: left;
  color: #F2D934; }
.box .box-two .box-yuyue .yuyue-two {
  float: right; }
.box .box-two .box-yuyue .yuyue-two ul li {
  margin-left: 30px;
  float: left;
  color: white; }
.box .box-two .box-yuyue .yuyue-two ul li span {
  color: #F2D934;
  font-weight: 800; }
.box .box-two .box-summary {
  padding: 10px 0 5px;
  background: rgb(235,235,235);
  position: relative;
  margin-bottom: 5px; }
.box .box-two .box-summary ul li {
  float: left;
  line-height: 22px; }
.box .box-two .box-summary ul li:first-child {
  padding-left: 10px;
  font-family: simsun;
  color: #999; }
.box .box-two .box-summary ul li:nth-child(2) {
  color: #E4393C;
  font-family: "microsoft yahei";
  margin-left: 10px; }
.box .box-two .box-summary ul li:nth-child(2) span:last-child {
  font-size: 22px; }
.box .box-two .box-summary ul li:nth-child(3) {
  font-size: 14px;
  padding: 1px 4px;
  margin-left: 20px;
  color: #fff; }
.box .box-two .box-summary ul li:last-child {
  float: right;
  margin-right: 6px; }
.box .box-two .box-summary ul li:last-child a {
  color: #007EC3; }
.box .box-two .box-wrap {
  position: relative;
  padding-bottom: 5px; }
.box .box-two .box-wrap .box-wrap-one {
  margin-bottom: 3px; }
.box .box-two .box-wrap .box-wrap-one ul li {
  float: left;
  line-height: 32px; }
.box .box-two .box-wrap .box-wrap-one ul li:not(:first-child) {
  margin-left: 5px; }
.box .box-two .box-wrap .box-wrap-one ul li img {
  vertical-align: -7px; }
.box .box-two .box-wrap .box-wrap-one ul li:first-child {
  padding-left: 10px;
  font-family: simsun;
  color: #999; }
.box .box-two .box-stock,
.box .box-two .box-supply {
  height: 18px; }
.box .box-two .box-stock .box-stock-one,
.box .box-two .box-supply .box-stock-one {
  padding: 1px; }
.box .box-two .box-stock .box-ul > li,
.box .box-two .box-supply .box-ul > li {
  float: left;
  color: #999; }
.box .box-two .box-stock .box-ul > li:first-child,
.box .box-two .box-supply .box-ul > li:first-child {
  width: 58px;
  height: 18px;
  padding-left: 10px;
  font-family: simsun;
  color: #999; }
.box .box-two .box-stock .box-ul > li:nth-child(2),
.box .box-two .box-supply .box-ul > li:nth-child(2) {
  margin-left: 12px; }
.box .box-two .box-stock .box-ul > li:nth-child(2) span,
.box .box-two .box-supply .box-ul > li:nth-child(2) span {
  color: red; }
.box .box-two .box-stock .box-ul > li:nth-child(3) span,
.box .box-two .box-supply .box-ul > li:nth-child(3) span {
  font-weight: 800; }
.box .box-two .box-stock {
  margin-bottom: 5px;
  cursor: pointer; }
.box .box-two .box-stock li:nth-child(2):hover .img {
  transition: all .3s;
  transform: rotateZ(180deg); }
.box .box-two .box-stock .box-stock-li {
  position: relative; }
.box .box-two .box-stock .box-stock-two {
  display: none;
  z-index: 10;
  position: absolute;
  left: -1px;
  background-color: #fff;
  width: 399px;
  padding-top: 20px;
  margin-top: -2px;
  border: solid 1px #CCCCCC;
  border-top: none; }
.box .box-two .box-stock .box-stock-two dl {
  margin: 0 10px;
  padding-bottom: 15px; }
.box .box-two .box-stock .box-stock-two dt img {
  float: right; }
.box .box-two .box-stock .box-stock-two dt a {
  color: #666; }
.box .box-two .box-stock .box-stock-two dd {
  padding-top: 10px; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd {
  overflow: hidden; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd .box-stock-top {
  position: relative;
  z-index: 44; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd .box-stock-top .box-stock-div {
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #ddd;
  padding: 2px 10px;
  background: #fff;
  color: #005aa0;
  font: 700 14px 'microsoft yahei';
  border-bottom: none; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd .box-stock-fot {
  position: relative;
  z-index: 33;
  height: 100px;
  margin-top: -2px;
  padding-top: 10px; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd .box-stock-fot .box-stock-con {
  position: absolute;
  top: 10px;
  left: 0;
  background: white;
  display: none; }
.box .box-two .box-stock .box-stock-two dd .box-stock-dd .box-stock-fot .box-stock-con li {
  float: left;
  width: 6.4em;
  margin-right: 5px;
  margin-bottom: 5px; }
.box .box-two .box-supply {
  margin-bottom: 3px;
  height: 32px;
  line-height: 32px; }
.box .box-two .box-attr {
  margin-top: 16px;
  margin-bottom: 4px; }
.box .box-two .box-attr img {
  width: 40px;
  height: 40px; }
.box .box-two .box-attr dt,
.box .box-two .box-attr dd {
  float: left; }
.box .box-two .box-attr dt {
  padding-left: 10px;
  font-family: simsun;
  color: #999;
  line-height: 34px; }
.box .box-two .box-attr dd {
  border: solid 1px #CCCCCC;
  background: #F7F7F7;
  color: #999;
  margin-bottom: 4px;
  margin-left: 5px; }
.box .box-two .box-attr dd img {
  vertical-align: -12px; }
.box .box-two .box-attr dd:nth-child(3) {
  border: solid 1px red; }
.box .box-two .box-attr-2 {
  margin-bottom: 10px;
}
.box .box-two .box-attr-2 dt,
.box .box-two .box-attr-2 dd {
  float: left;
}

.box .box-two .box-attr-2 dt {
  padding-left: 10px;
  font-family: simsun;
  color: #999;
  line-height: 34px; }
.box .box-two .box-attr-2 dd {
  border: solid 1px #CCCCCC;
  margin-left: 5px;
  line-height: 34px;
  padding: 0 13px;
  white-space: nowrap;

  &:hover{
    cursor: pointer;
    border: rgb(60,133,39) 1px solid;
  }
}
.box .box-two .box-attr-2 dd.redborder{
  border: solid 1px red; }
.box .box-two .box-attr-3 {
  border: #CCCCCC 1px dashed;
  border-left: none;
  border-right: none; }
.box .box-two .box-btns {
  margin-top: 0;
  padding: 24px 10px 0; }
.box .box-two .box-btns .box-btns-one {
  height: 44px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
  margin-right: 10px;
  float: left; }
.box .box-two .box-btns .box-btns-one input {
  width: 43px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  float: left; }
.box .box-two .box-btns .box-btns-one .box-btns-one1 {
  float: left; }
.box .box-two .box-btns .box-btns-one .box-btns-one1 button {
  cursor: pointer;
  width: 17px;
  height: 23px;
  outline: none;
  margin-top: -1px; }
.box .box-two .box-btns .box-btns-two {
  float: left;
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  font-size: 18px;
  font-family: "microsoft yahei";
  color:white;
  background: rgb(60,133,39);
  cursor:hand;

  &:hover{
    cursor: pointer;
  }
}
.box .box-two .box-btns .box-btns-two-not-allowed {
  float: left;
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  font-size: 18px;
  font-family: "microsoft yahei";
  color:white;
  background: rgb(128,176,114);
  pointer-events: none;
  cursor: not-allowed;

}
.box .box-two .box-btns .box-btns-two-off {
  float: left;
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  font-size: 18px;
  font-family: "microsoft yahei";
  color: #5d5d5d;
  background: #d0cfd9;
  cursor:not-allowed}
.box .box-two .box-btns .box-btns-two a {
  color: #FFFFFF; }
.box .box-two .box-btns .box-btns-three {
  float: left;
  line-height: 46px;
  margin-left: 25px; }
.box .box-two .box-btns .box-btns-three img {
  vertical-align: -3px; }
.box .box-two .box-footer-zo {
  margin-top: 20px; }
.box .box-two .box-footer dt,
.box .box-two .box-footer dd {
  float: left; }
.box .box-two .box-footer dt {
  padding-left: 10px;
  font-family: simsun;
  color: #999;
  line-height: 24px; }
.box .box-two .box-footer dd {
  line-height: 24px;
  margin-left: 15px;
  font-family: simsun;
  color: #999; }
.box .box-two .box-footer dd a {
  color: #005AA0; }

.boxx {
  float: left;
  width: 450px; }
.boxx .boxx-one {
  padding: 20px 0 0; }
.boxx .boxx-one ul li {
  color: #999; }
.boxx .boxx-one ul li:first-child {
  float: left; }
.boxx .boxx-one ul li:first-child span img {
  vertical-align: -3px; }
.boxx .boxx-one ul li:last-child {
  float: right; }

.box-lh {
  margin-bottom: 18px;
  position: relative;
  bottom: -20px; }
.box-lh .box-lh-one {
  margin-top: 30px;
  position: relative;
  width: 400px;
  height: 70px;
  overflow: hidden;
  margin: 0 auto;
}
.box-lh .box-lh-one ul {
  position: absolute;
  width: 684px;
  height: 58px;
  top: 0px;
  left: 0px; }
.box-lh .box-lh-one ul li {
  float: left;
  margin: 0 8px;
  //padding: 1px;
  width: 64px;
  height: 64px;
}
.box-lh .box-lh-one ul li img {
  width: 60px;
  height: 60px; }
.box-lh #left,
.box-lh #right {
  position: absolute;
  font-family: simsun;
  bottom: 10px;
  font-size: 40px;
  font-weight: 800;
  cursor: pointer;
  color: #ccc;

  &:hover{
    color: rgb(60,133,39);
    cursor: pointer;
  }

}
.box-lh #left {
  left: 0; }
.box-lh #right {
  right: 0; }

.imgbox {
  position: relative;
  z-index: 3; }

.probox {
  width: 450px;
  height: 450px;
  border: 1px solid #000;

  .proboxDiv{
    display: none;
    width: 300px;
    height: 300px;
    position: absolute;
    background-color: rgb(60,133,39);
    border: rgb(220,220,220) 1px solid;
    opacity: 0.5;
  }

  &:hover{
    cursor: move;

    .proboxDiv{
      display: block;
    }
  }
}

.probox img {
  width: 448px;
  height: 448px;
  vertical-align: top; }

.showbox {
  display: none;
  position: absolute;
  left: 452px;
  top: 0;
  width: 450px;
  height: 500px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #FFFFFF; }

.showbox img {
  position: absolute;
  height: 600px;
  width: 600px; }

.hoverbox {
  display: none;
  position: absolute;
  top: 0;
  background: rgba(255, 255, 0, 0.5);
  height: 300px;
  width: 300px;
  cursor: move;
  z-index: 10; }

.oBox {
  width: 990px; }
.oBox .shuoHou {
  width: 990px;
  height: 52px;
  font-size: 12px;
  background: #F7F7F7; }
.oBox .shuoHou .baoZhang {
  width: 968px;
  height: 18px;
  margin: 0 auto;
  position: relative;
  top: 9px; }
.oBox .shuoHou .baoZhang h2 {
  width: 130px;
  height: 18px;
  color: #808080; }
.oBox .changJia {
  width: 990px;
  height: 895.33px;
  margin: 0 auto; }
.oBox .changJia .oCz {
  width: 888px;
  height: 140px; }
.oBox .changJia .lianBao {
  width: 970px;
  height: 170px;
  margin: 0 auto;
  position: relative;
  top: 50px;
  color: #666666; }
.oBox .changJia .lianBao .oImg {
  width: 888px;
  height: 50px;
  margin: 0 auto;
  padding-top: 6px;
  display: block; }
.oBox .changJia .lianBao .oImg h3 {
  margin-top: 10px; }
.oBox .changJia .lianBao .oImg img {
  width: 35px;
  height: 32px;
  display: inline;
  margin-left: 10px;
  vertical-align: middle; }
.oBox .changJia .lianBao .oImg h3 {
  width: 64px;
  height: 43px;
  color: red;
  display: inline; }
.oBox .changJia .lianBao .hangHuo {
  width: 888px;
  height: 50px; }
.oBox .changJia .lianBao .wenZi {
  width: 888px;
  height: 148px;
  margin: 0 auto;
  font-size: 13px; }
.oBox .changJia .quanLi {
  width: 970px;
  height: 80px;
  font-size: 12px;
  margin: 0 auto; }
.oBox .changJia .quanLi h4 {
  width: 970px;
  height: 20px;
  color: red; }
.oBox .changJia .quanLi .jingDong {
  color: #666666; }
.oBox .changJia .quanLi .jingDong .oZhu {
  color: #666666;
  font-weight: bold; }
.oBox .changJia .jiaGe {
  width: 970px;
  height: 130px; }
.oBox .pingJia {
  width: 990px;
  height: 39.33px;
  font-size: 12px;
  background: #F7F7F7; }
.oBox .pingJia .oSp {
  width: 968px;
  height: 18px;
  margin: 0 auto;
  position: relative;
  top: 9px; }
.oBox .pingJia .oSp h2 {
  width: 100px;
  height: 18px;
  color: #808080; }
.oBox .oGood {
  width: 990px;
  height: 139.67px;
  text-align: center;
  margin: 0 auto; }
.oBox .oGood .pingDu {
  width: 130px;
  height: 89.67px;
  display: inline;
  position: relative;
  top: 10px; }
.oBox .oGood .pingDu .oWell {
  width: 36px;
  height: 14.67px;
  font-size: 5px; }
.oBox .oGood .pingDu h3 {
  width: 90px;
  height: 56.67px;
  font-size: 20px;
  color: red;
  display: inline; }
.oBox .oGood .oMonth {
  width: 900px;
  height: 62.67px;
  float: right;
  position: relative; }
.oBox .oGood .oMonth li {
  width: 83.07px;
  height: 21.33px;
  color: #808080;
  float: left;
  font-size: 12px;
  position: relative;
  margin-left: 15px;
  margin-top: 8px; }
.oBox .oGood .oMonth li p {
  width: 83.07px;
  height: 21.33px;
  line-height: 21.33px;
  color: darkgray;
  border: 1px solid darkgray; }
.oBox .oGood .oMonth li:hover {
  border: black;
  color: gray; }

.gouwuchexiaguo {
  display: none;
  width: 325px;
  height: 68px;
  border: 1px solid gainsboro;
  position: absolute;
  top: 112px;
  right: 117px;
  box-shadow: 0 3px 8px lavender;
  color: #666666;
  font-size: 16px; }

/*# sourceMappingURL=shop.css.map */

</style>
